<template>
	<div class="vue_app coupons" style="position: absolute;width: 100%">
		<my-header :title="'领取优惠券'" :hasTitle="true" :hasBack="true"></my-header>
		<!--头部-->
		<div class="overhid" :style="`height: ${screenHeight}px`">
			<vertical-scroll>
				<ul class="coupon_list">
					<li v-for="(val,index) in couponsdata" v-if="couponsdata" @click="mycoupons(val,index)" :class="[{already1:val.state=='准备开抢'||val.auditorStatus==7||val.auditorStatus==4}, {use:val.state=='已领取'}]">
						<dl>
							<dt class="spandt">
							    <!--:style="{backgroundColor:useplatcolor(val.usePlatform)}"-->
								<span class="usePlatspan" :class="useplatcolor(val.usePlatform)" >{{useterrace(val.usePlatform)}}</span> 
								{{val.couponName}}
							</dt>
							<dd class="spandd">{{useRangefn(val)}}</dd>
							<dd class="spandd" v-if="val.useRestriction==1">满{{val.fullElement}}元使用</dd>
							<!--<dd>使用平台：{{useterrace(val.usePlatform)}}</dd>-->
							<p v-if="val.auditorStatus==5">活动结束时间：{{val.couponActivityVO.endTime}}</p>
							<p v-if="val.auditorStatus==7||val.auditorStatus==4">活动开始时间：{{val.couponActivityVO.startTime}}</p>
						</dl>
						<div class="account_money">
							<div class="moneyclss">
								<span class="unit" v-if="val.couponAmount">¥</span>
								<span>{{pricetwo(1,val.couponAmount,val.couponDiscount)}}</span><span class="unit" v-if="val.couponAmount">{{pricetwo(2,val.couponAmount,val.couponDiscount)}}</span>
								<span class="unit" v-if="val.couponDiscount">折</span>
							</div>
							<p class="stateclss">{{val.state}}</p>
						</div>
					</li>
					<div class="no_data" v-if="couponsdata.length==0">
						<img src="static/image/no-yh.png" style="width:70%;" />
						<p>暂无可领取的优惠券</p>
					</div>
				</ul>
			</vertical-scroll>
		</div>
		<!--<div class="cardoperation">
			<p @click="onegetcoup" :class="{onbuttern:onbuttern}">一键领取</p>
		</div>-->
	</div>
</template>

<script>
	import MyHeader from "../header";
	import { MessageBox } from '@/ui-components';
	import axios from "axios";
	import VerticalScroll from '../../real-components/VerticalScroll';
	export default {
		data() {
			return {
				couponsdata: [],
				onbuttern: false,
				flageclick: true,
			}
		},
		components: {
			"my-header": MyHeader,
			"vertical-scroll": VerticalScroll,
		},
		methods: {
			//价格小数点后两位
			pricetwo(num, amount, discount) {
				if(num == 1 && discount) {
					return discount
				} else if(num == 1 && amount) {
					return String(amount).split('.')[0];

				} else if(num == 2 && amount) {
					if(String(amount).split('.')[1]) {
						return "." + String(amount).split('.')[1];
					} else {
						return ""
					}

				}
			},
			//优惠券使用范围
			useRangefn(item) {
				if(item.useRange == 1) {
					if(item.preferentialRange.promotionGoodsList.length == 1) {
						return item.preferentialRange.promotionGoodsList[0].goodsName + "卡券"
					} else {
						return "商品类卡券"
					}
				} else if(item.useRange == 2 || item.useRange == 5) {
					if(item.preferentialRange.promotionClassList.length == 1) {
						return item.preferentialRange.promotionClassList[0].className + "卡券"
					} else {
						return "品类卡券"
					}
				} else if(item.useRange == 3) {
					if(item.preferentialRange.promotionBrandList.length == 1) {
						return item.preferentialRange.promotionBrandList[0].brandName + "卡券"
					} else {
						return "品牌类卡券"
					}
				} else if(item.useRange == 4) {
					return "全场卡券"
				}
			},
			//使用平台的获取
			useterrace(item) {
				var arr = item.split(',')
				if(arr.indexOf('wap') > -1 && arr.indexOf('offline') < 0) {
					return '商城用'
				} else if(arr.indexOf('offline') > -1 && arr.indexOf('wap') < 0) {
					return '体验中心用'
				} else if(arr.indexOf('wap') > -1 && arr.indexOf('offline') > -1) {
					return '商城体验中心通用'
				}
				/*let use1 = item.replace(/WAP/, "wap")
				let use2 = use1.replace(/PC/, "pc")
				let use3 = use2.replace(/offline/, "线下")
				return use3*/
			},
			useplatcolor(item) {
				var arr = item.split(',')
				if(arr.indexOf('wap') > -1 && arr.indexOf('offline') < 0) {
					return 'usePlatspan1'
				} else if(arr.indexOf('offline') > -1 && arr.indexOf('wap') < 0) {
					return 'usePlatspan2'
				} else if(arr.indexOf('wap') > -1 && arr.indexOf('offline') > -1) {
					return 'usePlatspan3'
				}
			},
			queryCoupons() {
				var sessionId = localStorage.getItem('sessionId');
				let url = api.trade_host + '/marketCenter/getCanReceiveTicket/' + api.enterpriseCode;
				let config = {
					url: url,
					method: 'GET',
					headers: {
						'sessionId': sessionId,
					},
				};
				axios(config).then((res) => {
					this.couponsdata = [];
					let obj = res.data.data;
					let couponsdata1 = [];
					let couponsdata2 = [];
					for(var i = 0; i < res.data.data.length; i++) {
						if(obj[i].auditorStatus == 5) {
							obj[i].state = "立即领取"
							couponsdata1.push(obj[i])
						} else if(obj[i].auditorStatus == 7 || obj[i].auditorStatus == 4) {
							obj[i].state = "准备开抢"
							couponsdata2.push(obj[i])
						}
					}
					this.couponsdata = couponsdata1.concat(couponsdata2)
				})
			},
			mycoupons(val, index) {
				var sessionId = localStorage.getItem('sessionId');
				if(!sessionId || sessionId == 'undefined') {
					MessageBox('用户未登录账号', '请先登录账号再领取购物券吧').then(
						() => {
							this.$router.push({
								path: 'login',
								query: {
									page: 'Coupons'
								}
							})
						}
					)
					return
				}
				if(val.state == "已领取" || val.state == "准备开抢" || val.auditorStatus == 7 || val.auditorStatus == 4) {
					return
				}
				if(this.flageclick) {
					this.flageclick = false
					let url = window.api.trade_host + '/marketCenter/receiveCouponCodesOnline/' + val.couponCode;
					let config = {
						url: url,
						method: 'GET',
						headers: {
							'sessionId': sessionId,
						},
					};
					axios(config).then((res) => {
						this.flageclick = true
						if(res.data.returnCode == 1) {
							MessageBox('', '恭喜领取成功!').then()
							val.state = "已领取"
						} else if(res.data.returnCode == 0) {
							MessageBox('', res.data.msg).then()
							val.state = "准备开抢"
						}
					})
				}

			},
			//一键领取所有优惠券
			onegetcoup() {

			}

		},
		computed: {
			screenHeight() {
				return window.innerHeight - '60';
			}
		},
		mounted() {
			this.queryCoupons()
			// initDomTree(this.getDomTree[this.page]);

		},
	}
</script>

<style>
	.coupons .overhid {
		overflow: hidden;
	}
	
	.coupons .coupon_list li {
		background: #fff;
		border: none;
		height: 4rem;
	}
	
	.coupons .coupon_list li dl dt {
		font-weight: normal !important;
		padding-right: 0.2rem;
		/*width: 10rem;*/
		line-height: 1rem;
		font-size: 0.7rem;
		margin-top: 0.2rem;
		/*overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;*/
	}
	
	.coupons .coupon_list li dl {
		text-align: left;
		white-space: normal;
	}
	
	.coupons .coupon_list li dl p {
		font-size: 0.6rem;
		line-height: 0.6rem;
		height: 0.6rem;
		margin-bottom: 0.2rem;
	}
	
	.coupons .coupon_list li dl dd {
		font-size: 0.5rem;
		padding: 0.1rem 0.2rem;
		border: 1px solid #d7d7d7;
		color: #666;
	}
	
	.coupons .coupon_list li::after,
	.coupons .coupon_list li::before {
		background: none;
		border-left: none;
		border-bottom: none;
		border-radius: none;
	}
	
	.coupons .coupon_list li .account_money .unit {
		font-size: 0.8rem;
	}
	
	.coupons .coupon_list li .account_money {
		background: url(../../../static/image/myCoupon1.png) repeat-y right;
		background-size: contain;
		height: 4rem;
		color: #fff;
		border: none;
	}
	
	.coupons .coupon_list li .account_money .moneyclss {
		height: 1rem;
	}
	
	.coupons .coupon_list li .stateclss {
		height: 1rem;
		display: inline-block;
		/*position: absolute;
		right: 0.5rem;
		top: 1.5rem;*/
		color: #fff;
	}
	
	.coupons .coupon_list li .account_money span {
		font-size: 1.4rem;
		display: inline-block;
	}
	
	.coupons .coupon_list li dl dt {
		font-weight: normal !important;
		padding-right: 0.2rem;
		/*width: 10rem;*/
		line-height: 1rem;
		font-size: 0.7rem;
		/*overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;*/
	}
	/*.coupons .coupon_list li.already1 .stateclss {
		color: #a0a0a0;
	}
	
	.coupons .coupon_list li.use .stateclss {
		color: #a0a0a0;
	}*/
	
	.coupons .coupon_list li.already1,
	.coupons .coupon_list li.use {
		opacity: 0.5;
	}
	
	.coupons .coupon_list li.already1 .account_money {
		background: url(../../../static/image/myCoupon3.png) repeat-y right;
		background-size: contain;
		color: #fff;
	}
	
	.coupons .coupon_list li.use .account_money {
		background: url(../../../static/image/myCoupon1.png) repeat-y right;
		background-size: contain;
		color: #fff;
	}
	
	.coupons .coupon_list li.already1 dd {
		color: #a0a0a0;
		border: 1px solid #a0a0a0;
	}
	/*.coupons .coupon_list li.use dd {
		color: #a0a0a0;
		border: 1px solid #a0a0a0;
		color: #e8b852;
		border: 1px solid #e8b852;
	}*/
	
	.coupons .cardoperation {
		position: fixed;
		bottom: 1rem;
		width: 100%;
		height: 2rem;
	}
	
	.coupons .cardoperation p {
		display: inline-block;
		background-color: #ccc;
		width: 17rem;
		height: 2rem;
		line-height: 2rem;
		font-size: 0.8rem;
		color: #fff;
		border-radius: 0.2rem;
	}
	
	.coupons .onbuttern {
		background-color: #EF5423 !important;
	}
	
	.coupons .usePlatspan {
		display: inline-block;
		font-size: 0.6rem;
		line-height: 1rem;
		padding: 0rem 0.25rem;
		border-radius: 0.5rem;
		/*background-color: #FF9933;商城用
		background-color: #9FD959;体验中心用
		background-color: #EF5423; 商城体验中心通用*/
	}
	
	.usePlatspan1 {
		color: #38B035;
		background-color: rgba(56, 176, 53, 0.1);
		/*商城用*/
	}
	
	.usePlatspan2 {
		color: #FFCC00;
		background-color: rgba(255, 204, 0, 0.1);
		/*体验中心用*/
	}
	
	.usePlatspan3 {
		color: #FF6600;
		background-color: rgba(255, 102, 0, 0.1);
		/*商城体验中心通用*/
	}
</style>